<template>
	<view class="box" v-if="is_loading>0">
		<view class="dot_circle">
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
			<text class="dot"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		computed: {
			is_loading() {
				return this.$store.state.loading
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.05);
		pointer-events: none;
	}

	.dot_circle {
		position: relative;
	}

	.dot_circle .dot {
		display: block;
		width: 40px;
		height: 50px;
		border-radius: 50%;
		position: absolute;
		top: calc(50% - 25px);
		left: calc(50% - 40px);
		transform-origin: center right;
		animation: circle2 3.4s linear infinite;
	}

	.dot_circle .dot::before {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right: 10px;
		background-color: $uni-primary;
		box-shadow: 0 0 4px #fff;
	}

	.dot_circle .dot:nth-child(1) {
		transform: rotate(0deg);
		animation-delay: 0.2s;
	}

	.dot_circle .dot:nth-child(2) {
		transform: rotate(45deg);
		animation-delay: 0.4s;
	}

	.dot_circle .dot:nth-child(3) {
		transform: rotate(90deg);
		animation-delay: 0.6s;
	}

	.dot_circle .dot:nth-child(4) {
		transform: rotate(135deg);
		animation-delay: 0.8s;
	}

	.dot_circle .dot:nth-child(5) {
		transform: rotate(180deg);
		animation-delay: 1s;
	}

	.dot_circle .dot:nth-child(6) {
		transform: rotate(225deg);
		animation-delay: 1.2s;
	}

	.dot_circle .dot:nth-child(7) {
		transform: rotate(270deg);
		animation-delay: 1.4s;
	}

	.dot_circle .dot:nth-child(8) {
		transform: rotate(315deg);
		animation-delay: 1.6s;
	}

	@keyframes circle2 {
		0% {
			opacity: 0;
			transform: rotate(-360deg);
		}

		100% {
			opacity: 1;
			transform: rotate(360deg);
		}
	}
</style>